<template>
  <div>
    <el-table :data="list" v-loading="listLoading" border style="width: 100%">
      <el-table-column prop="name" label="模块名称" width="20%" align="center"></el-table-column>
      <el-table-column prop="platform_name" label="使用名称" width="20%" align="center"></el-table-column>
      <el-table-column label="图标" width="20%" align="center">
        <template scope="scope">
          <v-circular-image v-if="scope.row.icon" :src="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="互动列表" width="40%" align="center"></el-table-column>
      <el-table-column label="子栏目" width="20%" align="center">
        <template scope="scope">
          <el-button size="small" type="info">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="20%" align="center">
        <template scope="scope">
          <el-button size="small" type="success" @click="setting(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="20%" align="center">
        <template scope="scope">
          <el-checkbox :checked="isOpen(scope.row.open)" @change="changeOpen(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  
    <!--新增界面-->
    <el-dialog title="编辑" v-model="settingFormVisible" :close-on-click-modal="false">
      <el-form :model="settingForm" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="settingForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="settingForm" label-width="80px">
        <el-form-item label="图标" prop="image">
          <el-upload 
            class="avatar-uploader" 
            action="" 
            :show-file-list="false" 
            :before-upload="beforeAvatarUpload">
            <img v-if="settingForm.image" :src="settingForm.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form :model="settingForm" label-width="80px">
        <el-form-item label="平台互动" prop="icon">
          <el-checkbox-group v-model="settingForm.platform_id">
            <el-checkbox v-for="item in platformList" v-if="item.id !== id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="settingFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="formSubmit" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import circular from '../../components/circular-image'
export default {
  name: 'settingModule',
  props: {
    id: {
      type: Number,
      default: 9
    }
  },
  data() {
    return {
      listLoading: false,
      list: [],
      platformList: [],
      settingFormVisible: false,
      settingForm: {
        id: 0,
        name: '',
        image: '',
        icon: undefined,
        platform_id: []
      },
      submitLoading: false
    }
  },
  created() {
    this.getModuleList()
    this.$http.post('/api/system/platform/list').then(respones => {
      this.platformList = respones.body.data
    })
  },
  methods: {
    getModuleList() {
      this.listLoading = true
      this.$http.post('/api/system/module/list', { id: this.id }).then(respones => {
        this.list = respones.body.data
        this.listLoading = false
      })
    },
    isOpen(result) {
      return !!result === true
    },
    changeOpen(result) {
      this.$http.post('/api/system/module/use', { id: result.id }).then(respones => {
        console.log(respones.body)
      })
    },
    setting(result) {
      this.settingFormVisible = true
      this.settingForm.id = result.id
      this.settingForm.name = result.platform_name ? result.platform_name : result.name
      this.settingForm.image = result.icon

      console.log(result)
    },
    beforeAvatarUpload(file) {
      if (typeof FileReader === 'undefined') {
        this.$message.error('您的浏览器不支持图片上传，请升级您的浏览器')
        return false
      }

      var reader = new FileReader()
      reader.readAsDataURL(file)
      var vm = this
      reader.onload = function(e) {
        vm.settingForm.image = e.target.result
      }

      this.settingForm.icon = file
      return false
    },
    formSubmit() {
      this.$http.post('/api/system/module/edit', this.settingForm, {emulateJSON: false}).then(respones => {
        console.log(respones.body)
        if (respones.body.code === '00050') {
          this.getModuleList()
          this.settingFormVisible = false
          this.$message.success('提交成功')
        } else {
          this.$message.error(respones.body.msg)
        }
      })
    }
  },
  components: {
    'v-circular-image': circular
  }
}
</script>
<style lang='less'>
.el-table {
  table {
    width: 100% !important;
  }
}
.avatar-uploader{
  display: flex;
  line-height: 12px;
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover{
      border-color: #20a0ff;
    }
    .avatar {
      width: 45px;
      height: 45px;
      display: block;
    }
  }
  .avatar-uploader-icon {
    font-size: 12px;
    color: #8c939d;
    width: 45px;
    height: 45px;
    line-height: 45px !important;
    text-align: center;
  }
}
</style>
